// 底部报价栏
<template>
  <div class="foot-seach">
    <div class="seach">
      <h1>在线智能报价</h1>
      <p>
        <span>10秒</span> 获得维保报价单
      </p>
      <div class="select-one">
         <i class="iconfont iconicon-test2"></i>
          <select v-model="formInline.elevatorType">
          <option value='' >扶梯</option>
          <option value='' >扶梯</option>
          <option value='' >扶梯</option>
        </select>
      </div>

      <div class="elevator">
        <input v-model="formInline.elevatorHeight" class="elevator-height" type="text" placeholder="输入电梯层高" />
        <input v-model="formInline.elevatorCount" class="elevator-count" type="text" placeholder="输入电梯数量" />
      </div>
      <div class="select-one">
       <i class="iconfont iconicon-test2"></i>
        <select v-model="formInline.epibolyType" >
          <option value="">选择维修类型</option>
          <option >清包</option>
          <option >半包</option>
          <option >全包</option>
        </select>
      </div>
      
      <div class="iphone">
        <input v-model="formInline.IPhone" type="text" placeholder="您的手机号码" />
      </div>
      <button @click="submit">立即获取</button>
    </div>
  </div>
</template>
<script>
export default {
  name: "FootSeach",
  data() {
   return {
    // 表单绑定的数据依赖
      formInline: {
        elevatorType: "", //电梯类型
        elevatorHeight: "", //电梯层高
        elevatorCount: "", //电梯数量
        epibolyType: "", //外包类型
        IPhone: "" //手机号
      }
   }
  },
  methods: {
   //提交表单
  submit(){
   this.formInline =''
   this.formInline= {
        elevatorType: "", //电梯类型
        elevatorHeight: "", //电梯层高
        elevatorCount: "", //电梯数量
        epibolyType: "", //外包类型
        IPhone: "" //手机号
      }
  }
  },
};
</script>
<style lang='scss' scoped>
.foot-seach {
  position: relative;
  height: 708px;
  width: 100%;
  background-color: #ccc;
  background: url("~@/assets/img/智能报价bg.jpg") no-repeat center;
  .seach {
 
   position: relative;
    text-align: center;
    position: absolute;
    right: 360px;
    top: 100px;
    width: 412px;
    height: 508px;
    background-color: #ffffff;
    color: black;
    h1{ 
     margin-left: 53px;
     text-align: left;
     margin-top: 50px;
     font-size: 30px;
     &::after{
      position: absolute;
      content: '';
      top: -97px;
      left: 35px;
      height: 169px;
      width: 1px;
      background-color: #4F7BD9;
      z-index: 999;
     }
    }
    p{
     margin-left: 53px;
     text-align: left;
     font-size: 14px;
     color: #2A2A2A;
     span{
      color: #4F7BD9;
     }
    }
    .select-one {
       position: relative;
       i {
          position: absolute;
          top: 29px;
          right: 83px;
          font-size: 17px;
          height: 8px;
          width: 9px;
        }
      select {
        margin-top: 15px;
        width: 310px;
        height: 50px;
        padding: 0 20px;
        border: 0;
        background-color: #f5f5f5;
        
      }
    }
   
    .elevator {
      margin-top: 15px;
      height: 50px;
      font-size: 0;
      input {
        &:first-child {
          border-right: 1px solid #eeeeee;
        }
        width: 155px;
        height: 50px;
        padding: 0 20px;
        box-sizing: border-box;
        background-color: #f5f5f5;
      }
    }
    .iphone {
      margin-top: 15px;
      input {
        width: 310px;
        height: 50px;
        padding: 0 20px;
        box-sizing: border-box;
        background-color: #f5f5f5;
      }
    }
    button {
      background-color: #4f7bd9;
      margin-top: 15px;
      height: 50px;
      width: 137px;
      font-size: 16px;
      color: #ffffff;
      border-radius: 3px;
    }
  }
}
</style>